<template>
	<view>
		
		<u-index-list :index-list="indexList" sticky>
			
			<template v-for="(item, index) in pinyinProvinvial">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]" height="600"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, index) in item" @click="select(cell)">
						{{cell.name}}
					</view>
				</u-index-item>
			</template>
		</u-index-list>
	</view>
</template>

<script>
	// npm install pinyin -S --->一个专门处理中文拼音的库,打开city文件夹,cmd打开控制台,输入命令,回车
	// npm install segmentit -S -->解析库的依赖
	import pinyin from "pinyin";
	import {provinvial} from '/mock/address/provinvial.js';
	import {city} from '../../../mock/address/city.js';
	import {area} from '../../../mock/address/area.js';
	
	export default {
		data() {
				return {
					// 字母数据
					indexList :[],
					
					//全部数据
					provinvial: [], //省
					cityData: [],
					areaData: [],
					streetsData: [],
					// 拼音列表形式的数据
					pinyinProvinvial:{},
					
					routeId:''
				};
			},
			onLoad(options) {
				console.log("onload里的参数:",options);
				let id = options.id;
				let codeId = uni.getStorageSync('provinvial').code;
				let codeId2 = uni.getStorageSync('city').code;
				this.routeId = id;
				switch(id*1){
					case 1 :
					
						this.getProvinvial();
						break;
					case 2 :
						
						this.getCity(codeId);
						break;
					case 3 :
						
						this.getArea(codeId2);
						break;
					default:
						break;
				}
			},
			mounted() {},
			methods: {
				select(data){
					console.log("点击的城市:",data);
					switch(this.routeId*1){
						case 1 :
							uni.setStorageSync('provinvial',data);
							break;
						case 2 :
							uni.setStorageSync('city',data);
							break;
						case 3 :
							uni.setStorageSync('area',data);
							break;
						default:
							console.log("没有routeId")
							break;
					}
					uni.navigateBack({
					// 返回上一级页面
						delta: 1
					});
				},
				// 获取字符串的拼音首字母
				getFirstLetter(str) {
				    const pinyinArr = pinyin(str, { style: pinyin.STYLE_FIRST_LETTER });
				    return pinyinArr[0][0].toUpperCase();
				},
				
				// 省份数据获取
				getProvinvial() {
					// 每次上级行政单位更新,清空保存的下级行政单位
					uni.setStorageSync('city',{a:'null'});
					uni.setStorageSync('area',{a:'null'});
					this.provinvial = provinvial;
					console.log("provinvial:",this.provinvial);
					const indexedCities = this.provinvial.reduce((acc, city) => {
						// console.log("acc==>",acc);
						// console.log("city==>",city);
					    const firstLetter = this.getFirstLetter(city.name);
					    if (!acc[firstLetter]) {
					        acc[firstLetter] = [];
					    }
					    acc[firstLetter].push(city);
					    return acc;
					}, {});
					// 拼音列表生成并排序
					let pinyinList = Object.keys(indexedCities).sort();
					// 按照拼音列表的顺序生成地区列表
					let cityList = pinyinList.map((item,index)=>{
						console.log(indexedCities[item]);
						return indexedCities[item]
					})
					console.log("拼音索引列表pinyinList:",pinyinList);
					console.log("cityList:",cityList);
					this.indexList = pinyinList
					this.pinyinProvinvial = cityList;
					
				},
				// 城市数据获取
				getCity(codeId) {
					uni.setStorageSync('area',{a:'null'});
					this.cityData = city.filter((item,index)=>{
							return item.code.slice(0,2) == codeId;
						});
					console.log("city:",this.cityData);
						// 将城市按照拼音首字母分组
						const indexedCities = this.cityData.reduce((acc, city) => {
							// console.log("acc==>",acc);
							// console.log("city==>",city);
						    const firstLetter = this.getFirstLetter(city.name);
						    if (!acc[firstLetter]) {
						        acc[firstLetter] = [];
						    }
						    acc[firstLetter].push(city);
						    return acc;
						}, {});
						// 拼音列表生成并排序
						let pinyinList = Object.keys(indexedCities).sort();
						// 按照拼音列表的顺序生成地区列表
						let cityList = pinyinList.map((item,index)=>{
							console.log(indexedCities[item]);
							return indexedCities[item]
						})
						console.log("拼音索引列表pinyinList:",pinyinList);
						console.log("cityList:",cityList);
						this.indexList = pinyinList
						this.pinyinProvinvial = cityList;
					
				},
				// 区县数据
				getArea(codeId) {
					this.areaData = area.filter((item,index)=>{
							return item.code.slice(0,4) == codeId;
						});
					// 将城市按照拼音首字母分组
						const indexedCities = this.areaData.reduce((acc, city) => {
							// console.log("acc==>",acc);
							// console.log("city==>",city);
						    const firstLetter = this.getFirstLetter(city.name);
						    if (!acc[firstLetter]) {
						        acc[firstLetter] = [];
						    }
						    acc[firstLetter].push(city);
						    return acc;
						}, {});
						// 拼音列表生成并排序
						let pinyinList = Object.keys(indexedCities).sort();
						// 按照拼音列表的顺序生成地区列表
						let cityList = pinyinList.map((item,index)=>{
							console.log(indexedCities[item]);
							return indexedCities[item]
						})
						console.log("拼音索引列表pinyinList:",pinyinList);
						console.log("cityList:",cityList);
						this.indexList = pinyinList
						this.pinyinProvinvial = cityList;
					
				}
			}
	}
</script>


<style lang="scss" >
	
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}


</style>
